.box{
  width: 100%;
  //height: 100vh;
  //border: 1px solid red;
  background-color: white;
  //padding-top: 2%;
  display: flex;
  .left{
    width: 70%;
    //height: 100%;
    //border-right: 1px solid skyblue;
    padding-top: 2%;
    .p{
      font-size: 20px;
      font-weight: 600;
      color: skyblue;
      cursor:pointer;
      padding-bottom: 10px;
      border-bottom: 3px solid skyblue;
      padding-left: 10px;
    }
    ul{
      width: 100%;
      //height: 100%;
       border-right: 1px solid red;
      display: flex;
      flex-wrap: wrap;
      padding-top: 20px;
      li{
        width: 20%;
        height:15vw;
        // border: 1px solid blue;
        cursor:pointer;
        transition: all 0.5s;
        position: relative;
        margin: 2.5% ;
        //border: 1px solid red;

        .text{
          pointer-events: none;
          width: 100%;
          height: 80px;
          background-color: rgba(255, 255, 255, .7);
          position: absolute;
          transition: all 0.5s;
          bottom: 0;
          border-radius: 10px 10px;
          overflow: hidden;
          h1{
            width: 80%;
            overflow: hidden;
            margin-top: 10%;
            margin-left: 10%;
            font-size: 16px;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .author{
            // border: 1px solid red;
            margin-top: 1%;
            margin-left: 10%;
            font-size: 12px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            width: 40%;
          }
          .brief{
            font-size: 12px;
            width: 70%;
            height: 50%;
            margin-left: 10%;
            margin-top: 10%;
          }
          .date{
            font-size: 12px;
            margin-top: 5%;
            margin-left: 50%;
          }
        }
      }
      li:hover{
        // width: 21%;
        // height: 100%;
        transform: scale(1,1.05);
        .text{
          height: 100%;
        }
      }
    }
  }
  .right{
    width: 30%;
    height: 100%;
    //border: 1px solid red;
    padding-top: 2%;
    .p{
      font-size: 20px;
      font-weight: 600;
      color: skyblue;
      cursor:pointer;
      padding-bottom: 10px;
      border-bottom: 3px solid skyblue;
      padding-left: 10px;
    }
    ul{
      width: 100%;
      height: 90%;

      li{
        width: 100%;
        height: 20%;
        cursor:pointer;
        // border: 1px solid red;
        border-bottom: 0.1vw solid rgb(235,235,235);
        display: flex;
        .one{
          height: 100%;
          width: 40%;
          // border: 1px solid red;
          display: flex;
          align-items: center;
          img{
            width: 70%;
            height: 60%;
            margin: 0 auto;
            // 保持图片不失真
            object-fit: cover;
            transition: all 0.5s;
          }
        }
        .two{
          height: 100%;
          width: 60%;
          // border: 1px solid red;
          display: flex;
          align-items: center;
          p{
            margin-left: 10%;
            transition: all 0.5s;
          }
        }
      }
      li:hover{
        img{
          width: 75%;
          height: 65%;
        }
        p{
          color: skyblue;
        }
      }
    }
  }
}